<template>
  <div class="project">
    <div class="top">
      <img :src="imgbg" class="showimg" />
      <img :src="imgsmal" class="showimgsmal" />
    </div>
    <div class="btom">
      <div class="butt">向右滑动</div>
      <div class="dodo" @mousedown="mousedoun" @mousemove="mousemove">></div>
    </div>
  </div>
</template>

<script>
import img0 from "../assets/ii.png";
import img1 from "../assets/54.jpg";
import Huakuai from "../components/HuaKuai.vue";
import Huakuai2 from "../components/HuaKuai2.vue";
export default {
  name: "demoOne",
  data() {
    return {
      msg: "",
      text: "向右滑动->",
      imgs: [img0],
      loginBtn: false,
      accuracy: 5, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      formLabelAlign: {},
      isShowSlide: true,

      imgbg: img0,
      imgsmal: img1,
      
    };
  },
  methods: {
    mousedoun: (e) => {
      console.log(e.clientX);

    },
    mousemove:(e)=>{
      console.log(e.clientX);
    }
  },
  components: { Huakuai, Huakuai2 },
};
</script>
<style scoped lang="less">
.project {
  .top {
    position: relative;
    .showimg {
      width: 300px;
      height: 100px;
    }
    .showimgsmal {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 20px;
      left: 0;
    }
  }
  .btom {
    position: relative;
    .butt {
      background-color: aliceblue;
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .dodo {
      width: 47px;
      height: 47px;
      background-color: pink;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
